<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'
import tabbar from '@/components/tabbar.vue'
import navbar from '@/components/navbar.vue'

// defineProps<{ msg: string }>()

const active = ref(0)
// const username = ref('')
// const password = ref('')
// ruoter
const router = useRouter()

const username = ref('')
const password = ref('')
const onSubmit = (values) => {
  console.log('submit', values)
}

onMounted(() => {
  // showDialog({
  //   message: '你当前不具备支付督察信息员资格！\n请进行资格申请',
  //   theme: 'round-button',
  //   confirmButtonText: '申请资格'
  // }).then(() => {
  //   // on close
  //   router.push({ path: 'application' })
  // })
})
</script>

<template>
  <navbar title="更改密码" :left="true"> </navbar>

  <div class="page">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="原始密码"
          label="原始密码"
          placeholder="原始密码"
          :rules="[{ required: true, message: '请填写原始密码' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="v-box">
          <div class="v-item red"></div>
          <div class="v-item"></div>
          <div class="v-item"></div>
          <div class="v-item"></div>
        </div>
        <van-field
          v-model="password"
          type="password"
          name="密码确认"
          label="密码确认"
          placeholder="密码确认"
          :rules="[{ required: true, message: '请填写密码确认' }]"
        />
      </van-cell-group>
      <van-divider :style="{ color: '#DC584D', borderColor: '#DC584D', padding: '0 16px' }">注意</van-divider>
      <div class="tips">
        <div class="icon-img">
          <img
            src=""
          />
        </div>
        密码必须足够复杂，至少有5符号长和至少3个字符类型 - 小写、大写字母、数字。
      </div>
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit" color="#DC584D"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped lang="scss">
.page {
  padding: 10px;
  p {
    text-align: center;
    margin-bottom: 50px;
  }
  .v-box {
    margin: 0.26667rem;
    display: flex;
    padding-left: 0.10667rem;
  }

  .v-box .v-item {
    width: calc(25% - 0.10667rem);
    height: 0.13333rem;
    background: #959595;
  }

  .v-box .v-item:not(:last-of-type) {
    margin-right: 0.10667rem;
  }

  .v-box .v-item.red {
    background: red;
  }

  .v-box .v-item.orange {
    background: orange;
  }

  .v-box .v-item.green {
    background: green;
  }

  .tips {
    color: #959595;
    display: flex;
    align-items: center;
    font-size: 0.32rem;
    padding: 0.26667rem;
  }

  .tips .icon-img {
    display: inline-block;
    width: 0.64rem;
    height: auto;
    overflow: hidden;
    margin-right: 0.13333rem;
  }

  .tips .icon-img img {
    width: 100%;
    transform: translateY(-1.6rem);
    filter: drop-shadow(0 1.6rem #959595);
  }
}
</style>
